
<div class="container" ng-app="routesApp">    
    <div class="row" >
        <div class="blockGray">
            <div class="blockInner">
                <ng-view></ng-view>
            </div>
        </div>        
    </div>    
   
    <!--  Definición de vistas parciales -->
    <script type="text/ng-template" id="index.html">       
        <progressbar class="progress-striped active" value="100" type="info" ng-show="loading"></progressbar>
            <div class="toolbar">
                <div class="col-md-7">
                    &nbsp;
                </div>
                <div class="col-md-5 ">
                    <div class="pull-right">
                        <div class="btn-toolbar" role="toolbar">
                            <div class="btn-group  btn-group-sm">
                                <button class="btn btn-default" ng-click="go('/index')"><span class="glyphicon glyphicon-home"></span> Inicio</button>
                                <button class="btn btn-default" ng-click="go('/add')"><span class="glyphicon glyphicon-plus-sign"></span> Nuevo</button>
                                <button class="btn btn-default" ng-click="goEdit('/edit/'+routeId)"><span class="glyphicon glyphicon-edit"></span> Editar</button>
                                <button class="btn btn-default" ng-click="delete(routeId)"><span class="glyphicon glyphicon-trash"></span> Eliminar</button>
                                <button class="btn btn-default" ng-click="refresh()"><span class="glyphicon glyphicon-refresh"></span> Actualizar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
        <br>
        <ng-jqgrid vapi="grid.apicall" config="grid.config" api="grid.api" gridid="grdRoutes" pagerid="routesPager"></ng-jqgrid>
    </script>
    
    <script type="text/ng-template" id="edit.html">
    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
    <progressbar class="progress-striped active" value="100" type="info" ng-show="sc.loading"></progressbar>
  
    <div class="toolbar">
        <div class="col-md-7">
            &nbsp;
        </div>
        <div class="col-md-5 ">
            <div class="pull-right">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group  btn-group-sm">
                        <a href="#!/index" class="btn btn-default" role="button"><span class="glyphicon glyphicon-home"></span> Inicio</a>
                        <button class="btn btn-default" ng-click="save()" ng-disabled="sc.frmRoute.$invalid"><span class="glyphicon glyphicon-floppy-save"></span> Guardar</button>
                        <button class="btn btn-default" ng-click="go('/add')"><span class="glyphicon glyphicon-plus-sign"></span> Nuevo</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

   <div class="panel panel-default">
       <div class="panel-heading">
           <ul class="nav nav-pills">
            <li><a href="#!/index"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
            <li class="active"><a href="#!/add"><span class="glyphicon glyphicon-random"></span> {{route.name}}</a></li>
            <li><a ng-show="!route.id"><span class="glyphicon glyphicon-map-marker"></span> Puntos de venta</a> <a ng-show="route.id" ng-href="{{'#!/edit/'+route.id+'/points'}}"><span class="glyphicon glyphicon-map-marker"></span> Puntos de venta</a></li>
          </ul>
       </div> 
        <div class="panel-body">
            <!-- <tabset type="pills" name="tab">
                <tab heading="Datos de la Ruta">
                    <br>-->
                    <div class="panel panel-default">                    
                        <div class="panel-body">
                            <form role="form" novalidate name="sc.frmRoute">
                                <div class="row">
                                    <div class="col-md-6">                               
                                        <input type="hidden" class="form-control" ng-model="route.id">
                                        <div class="form-group" ng-class="getFormFieldCssClass(sc.frmRoute.code)">
                                            <label for="code">Clave</label>
                                            <input type="text" class="form-control" id="code" name="code" placeholder="Clave de ruta" required  ng-model="route.code">
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group" ng-class="getFormFieldCssClass(sc.frmRoute.name)">
                                            <label for="name">Nombre</label>
                                            <input type="text" class="form-control" id="name" name="name" placeholder="Nombre de la ruta" required ng-model="route.name">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group" ng-class="getFormFieldCssClass(sc.frmRoute.status)">
                                            <label for="status">Estatus</label>
                                            <select id="status" name="status" class="form-control" required ng-model="route.status"
                                                    ng-options="opt.id as opt.status for opt in routeStatus">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                         <div class="form-group" ng-class="getFormFieldCssClass(sc.frmRoute.capacity)">
                                            <label for="capacity">Capacidad</label>
                                            <input type="text" class="form-control" id="capacity" name="capacity" placeholder="Capacidad" required ng-model="route.capacity">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group" ng-class="getFormFieldCssClass(sc.frmRoute.factor)">
                                            <label for="factor">Factor</label>
                                            <input type="text" class="form-control" id="factor" name="factor" placeholder="Factor" required ng-pattern="/^\s*-?(\d+)\s*$/" ng-model="route.factor">
                                        </div>
                                    </div>
                                    <div class="col-md-6">

                                    </div>
                                </div>                
                            </form>
                        </div>
                    </div>
                <!-- </tab>            
                <tab heading="Puntos de venta" disabled="!route.id" >
                    <br>
                    <div ng-include src="'indexRoutePoint.html'"></div>
                </tab>
            </tabset>   -->                
        </div>
   </div> 
    </script>
    <script type="text/ng-template" id="indexRoutePoint.html">
        <progressbar class="progress-striped active" value="100" type="info" ng-show="sc.loading"></progressbar>
        <alert ng-repeat="alert in routeAlerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
        <div ng-show="route.close==0" class="toolbar">
            <div class="col-md-4">
                &nbsp;
            </div>
            <div class="col-md-8 ">
                <div class="pull-right">
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group  btn-group-sm">
                            <button class="btn btn-default" ng-click="grid.edit.addRow()" ng-disabled="grid.edit.isEditing"><span class="glyphicon glyphicon-plus-sign"></span> Nuevo</button>
                            <button class="btn btn-default" ng-click="grid.edit.editRow()" ng-disabled="!grid.edit.selRow||grid.edit.isEditing"><span class="glyphicon glyphicon-edit"></span> Editar</button>                            
                            <button class="btn btn-default" ng-click="grid.edit.saveRow()" ng-disabled="!grid.edit.isEditing"><span class="glyphicon glyphicon-floppy-save"></span> Guardar</button>
                            <button class="btn btn-default" ng-click="grid.edit.cancel()" ng-disabled="!grid.edit.isEditing"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
                            <button class="btn btn-default" ng-click="grid.edit.upRow()" ng-disabled="!grid.edit.selRow||grid.edit.isEditing"><span class="glyphicon glyphicon-chevron-up"></span> Arriba</button>
                            <button class="btn btn-default" ng-click="grid.edit.downRow()" ng-disabled="!grid.edit.selRow||grid.edit.isEditing"><span class="glyphicon glyphicon-chevron-down"></span> Abajo</button>
                            <button class="btn btn-default" ng-click="grid.edit.delRow()" ng-disabled="!grid.edit.selRow||grid.edit.isEditing"><span class="glyphicon glyphicon-trash"></span> Eliminar</button>
                            <button class="btn btn-default" ng-click="grid.edit.refresh()" ng-disabled="grid.edit.isEditing"><span class="glyphicon glyphicon-refresh"></span> Actualizar</button>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
        <br>
    
        <div class="panel panel-default">
            <div class="panel-heading">
                <ul class="nav nav-pills">
                 <li><a href="#!/index"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
                 <li><a ng-click="go('/edit/'+route.id)"><span class="glyphicon glyphicon-random"></span> {{route.name}}</a></li>
                 <li class="active"><a ng-click="go('/edit/'+route.id + '/points')"><span class="glyphicon glyphicon-map-marker"></span> Puntos de venta</a></li>                 
                 <li ng-show="route.close==1"><a ng-click="openRoute()" ><span class="glyphicon glyphicon-log-out"></span> Abrir ruta</a></li>
                 <li ng-show="route.close==0"><a ng-click="closeRoute()" ><span class="glyphicon glyphicon-log-in"></span> Cerrar ruta</a></li>
               </ul>
            </div> 
            <progressbar class="progress-striped active" value="100" type="info" ng-show=""></progressbar>
            <div class="panel-body">
                <!-- <br>SelectedRouteId: {{grid.edit.selectedPoint.originalObject.id}} -->
                <!--<br>SelectedRoutePoint: {{grid.edit.selectedPoint.originalObject.point}}-->
                <div class="row">                
                    <div class="col-md-9" id="listRoutePoints">
                        <ng-jqgrid vapi="grid.apicall" config="grid.config" api="grid.api" gridid="grdRoutePoints" pagerid="routePointsPager"></ng-jqgrid>
                    </div>
                    <div class="col-md-3">
                        <accordion close-others="oneAtATime">
                            <accordion-group is-open="accordion.status.open">
                                <accordion-heading>
                                    Resumen de ruta <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': accordion.status.open, 'glyphicon-chevron-right': !accordion.status.open}"></i>                                    
                                </accordion-heading>
                                <ul class="list-group">
                                    <li class="list-group-item"><span class="badge">{{routeSummary.name}}</span>Nombre</li>
                                    <li class="list-group-item"><span class="badge">{{routeSummary.cantPoints}}</span>Total de PV y CI</li>
                                    <li class="list-group-item"><span class="badge">{{routeSummary.pointSales}}</span>Puntos de venta</li>
                                    <li class="list-group-item"><span class="badge">{{routeSummary.exchangeCenters}}</span>Centros de intercambio</li>
                                    <li class="list-group-item"><span class="badge">{{routeSummary.required}}</span>Puntos de visita obligatoria</li>
                                    <li class="list-group-item"><span class="badge">{{routeSummary.totalTime}}</span>Minutos totales de la ruta</li>
                                    <li class="list-group-item"><span class="badge">{{routeSummary.estatus}}</span>Estatus de la ruta</li>
                                </ul>
                     </accordion-group>
                        </accordion>
                    </div>
                </div>
               <!--  <input type="text" class="form-control" ng-model="grid.edit.selectedPoint.originalObject.id">RoutePoint: {{grid.edit.routePointId}}-->
                
            </div>
        </div>
         
    </script>
    
    <script type="text/ng-template" id="modal.html">
        <!-- <div class="modal-header">
            <h3>{{modalOptions.headerText}}</h3>
        </div>-->
        <div class="modal-body">
            <br/>
            <p>{{modalOptions.bodyText}}</p>
            <br/>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" 
                    data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
            <button type="button" class="btn btn-primary" 
                    data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
        </div>
    </script>
     
    
    <script type="text/ng-template" id="modalInfo.html">
        <!--<div class="modal-header">
            <h3>{{modalOptions.headerText}}</h3>
        </div>-->
        <div class="modal-body">
            <br/>
            <p>{{modalOptions.bodyText}}</p>
            
        </div>
        <div class="modal-footer">           
            <button type="button" class="btn btn-primary" 
                    data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
        </div>
    </script>
    
</div>